<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <title>在线OJ系统</title>
  <link rel="stylesheet" href="/css/index.css">
  <style>
    body {
      background-color: #619ebf;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .container {
      width: 100%;
    }

    .navbar {
      background-color: #343a40;
      padding: 10px;
      text-align: left;
      max-width: 100%;
      margin: 0 auto;
    }

    .navbar a {
      color: white;
      text-decoration: none;
      margin-right: 20px;
      font-size: 16px;
    }

    .navbar button.login {
      background-color: white;
      color: #343a40;
      border: 1px solid #ccc;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .navbar button.login:hover {
      background-color: #ddd;
    }

    .container .content {
      width: 80%;
      margin: 100px auto 0;
      text-align: center;
    }

    .container .content .font_ {
      display: block;
      margin-top: 20px;
      text-decoration: none;
      font-size: larger;
      color: white;
    }

    .container .img {
      margin-top: 50px;
    }

    .modal-content button,
    .modal-content input[type="submit"],
    #registerBtn {
      background-color: white;
      color: #343a40;
      border: 1px solid #ccc;
      padding: 6px 12px;
      margin-top: 10px;
      border-radius: 4px;
      cursor: pointer;
    }

    .modal-content button:hover,
    .modal-content input[type="submit"]:hover,
    #registerBtn:hover {
      background-color: #ddd;
    }

    .modal {
      display: none; /* 默认隐藏模态框 */
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin: 10% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 300px;
      border-radius: 8px;
      text-align: center;
    }

    .close {
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .acc {
      width: 90%;
      padding: 8px;
      margin-top: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .btn {
      margin-top: 10px;
      padding: 6px 12px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="navbar">
      <a href="/">首页</a>
      <a href="/all_questions">题库</a>
      <a href="https://blog.csdn.net/m0_69323023?type=blog" target="_blank">讨论</a>
      <a href="/admin/questions" id="adminLink" style="display: none;">题目管理</a>
      <button id="loginBtn" class="login">登录</button>
    </div>

    <div class="content">
      <h1 class="font_">这里是林仔的个人在线OJ首页~</h1>
      <p class="font_">我们经历的每个日常也许就是连续不断的奇迹。 --《日常》</p>
      <a class="font_" href="/all_questions">点击这里开始编程之旅！</a>
    </div>

    <div align="center" class="img">
      <img src="../images/index2.jpg" alt="index2.jpg" width="381" height="342">
    </div>
  </div>

  <!-- 登录模态框 -->
  <div id="loginModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>登录</h2>
      <form id="loginForm">
        <input class="acc" type="text" id="username" name="username" placeholder="用户名">
        <div class="user_error"><pre></pre></div>
        <input class="acc" type="password" id="password" name="password" placeholder="密码">
        <div class="password_error"><pre></pre></div>
        <input class="btn" type="submit" value="登录">
        <p>没有账号？点击这里:</p>
        <button id="registerBtn">注册</button>
      </form>
    </div>
  </div>

  <!-- 注册模态框 -->
  <div id="registerModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>注册</h2>
      <form id="registerFrom">
        <input class="acc" type="text" id="regUsername" name="regUsername" placeholder="用户名不为空">
        <div class="user_error"><pre></pre></div>
        <input class="acc" type="password" id="regPassword" name="regPassword" placeholder="密码至少4位">
        <div class="password_error"><pre></pre></div>
        <input class="btn" type="submit" value="注册">
      </form>
    </div>
  </div>

  <!-- 用户信息模态框 
  <div id="userProfileModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2 id="welcomeMsg">welcome</h2>
      <div align="center" class="img">
        <img src="../images/index2.jpg" alt="index2.jpg" width="157" height="165">
      </div>
      <button id="users" onclick="changePassword()">修改密码</button>
      <button id="users" onclick="logout()">退出登录</button>
    </div>
  </div>
-->
  <!-- 个人信息弹窗 -->
  <div id="userProfileModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <!-- 欢迎用户 -->
        <h2 id="welcomeMsg">welcome</h2>
        <div align="center" class="img">
            <img src="../images/index2.jpg" alt="index2.jpg" width="157" height="165">
        </div>
        <!-- 修改密码按钮 -->
        <button id="users" onclick="changePassword()">修改密码</button>
        <!-- 退出登录按钮 -->
        <button id="users" onclick="logout()">退出登录</button>
    </div>
</div>

  <!-- 修改密码模态框 
  <div id="changePasswordModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>修改密码</h2>
      <canvas id="captchaCanvas" width="300" height="20"></canvas>
      <form id="changePasswordFrom">
        <input class="acc" type="text" id="verCode" name="verCode" placeholder="输入四位验证码">
        <div class="verCode_error"><pre></pre></div>
        <input class="acc" type="text" id="oldPassword" name="oldPassword" placeholder="旧的密码">
        <div class="oldPassword_error"><pre></pre></div>
        <input class="acc" type="password" id="newPassword1" name="newPassword1" placeholder="新的密码,密码至少4位">
        <div class="newPassword_error"><pre></pre></div>
        <input class="acc" type="password" id="newPassword2" name="newPassword2" placeholder="再次确认输入新密码">
        <div class="password_error"><pre></pre></div>
        <input class="btn" type="submit" value="修改">
      </form>
    </div>
  </div>
-->
  <div id="changePasswordModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>修改密码</h2>
      <canvas id="captchaCanvas" width="300" height="20"></canvas>
      <form id="changePasswordFrom">
        <input class="acc" type="text" id="verCode" name="verCode" placeholder="输入四位验证码">
        <div class="verCode_error">
            <pre></pre>
        </div>
        <input class="acc" type="text" id="oldPassword" name="oldPassword" placeholder="旧的密码">
        <div class="oldPassword_error">
            <pre></pre>
        </div>
        <input class="acc" type="password" id="newPassword1" name="newPassword1" placeholder="新的密码,密码至少4位">
        <div class="newPassword_error">
            <pre></pre>
        </div>
        <input class="acc" type="password" id="newPassword2" name="newPassword2" placeholder="再次确认输入新密码">
        <div class="password_error">
            <pre></pre>
        </div>
        <input class="btn" type="submit" value="修改">
      </form>
    </div>
  </div>
  <script src="/js/login.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
